<template>
    <navtop title="商品详情" :fixed="true" />
    <div class="detail">
        <div class="detail-img">
            <img class="auto-img" :src="productDetail.large_img" alt="" />
        </div>
        <div class="detail-info">
            <div class="info">
                <div>
                    <div class="info-name">{{ productDetail.name }}</div>
                    <div class="info-enname">{{ productDetail.enname }}</div>
                </div>
                <div class="info-price">¥{{ productDetail.price }}</div>
            </div>
            <div class="info-item" v-for="item1 in productDetail.select" :key="item1">
                <div class="item-name">{{ productDetail[`${item1}_desc`] }}</div>
                <div class="item-select" @click="selectInfo(index, item1)"
                    :class="{ active: productDetail[`${item1}_Index`] === index }"
                    v-for="(item2, index) in  productDetail[`${item1}`]" :key="item2">
                    {{ item2 }}
                </div>
            </div>


            <div class="select-count-box">
                <div class="select-text">选择数量</div>
                <div class="select-count">
                    <van-stepper v-model="goodsNum" theme="round" button-size="22" disable-input />
                </div>
            </div>
            <div class="detail-desc">
                <div class="detail-desc-title">商品描述</div>
                <div class="detail-desc-content">
                    <div class="desc-item" v-for="(item, index) in productDetail.desc" :key="index">
                        {{ index + 1 }}、{{ item }}
                    </div>
                </div>
            </div>
        </div>

        <van-action-bar>
            <van-action-bar-icon :to="{ name: 'shopbag' }" icon="bag" text="购物袋" color="#646566" :badge="shopbagCount" />
            <van-action-bar-icon @click="likeRect" icon="like" :text="isLike ? '已收藏' : '收藏'"
                :color="isLike ? '#e4393c' : '#646566'" />
            <van-action-bar-button @click="addShop" color="#0C34BA" text="加入购物袋" />
        </van-action-bar>
    </div>
</template>
<script setup lang="ts">
import navtop from "@/components/navtop.vue";

import { Toast } from "vant";

import { useRoute, useRouter } from "vue-router"

// import { defineProps } from 'vue'

// import { getproductDetail, getshopcartCount, getfindlike, postnotlike, postlike } from "@/api/index"

import { getproductDetail, postAddShop, getshopcartCount, getfindlike, postnotlike, postlike } from "@/api/index"
let route: any = useRoute();

let router: any = useRouter();


let itempid = route.params.pid;

let productDetail: any = ref<object>({});

let goodsNum: any = ref<number>(1);


// let currentIndex: any = ref<number>(1);

let isLike: any = ref<boolean>(false);

let shopbagCount: any = ref<number | string>("");

let rules: Array<string> = ["tem", "sugar", "milk", "cream"];

// let selectItem: any = ref<Array<any>>([]);

let addShop = () => {
    // console.log(itempid);
    // console.log(goodsNum.value);
    // console.log(productDetail.value)
    let arr = [];
    productDetail.value.select.forEach((item) => {
        let index = productDetail.value[`${item}_Index`]
        arr.push(productDetail.value[item][index])
    })

    let str = arr.join('/');

    // console.log(str);

    postAddShop({
        pid: itempid,
        count: goodsNum.value,
        rule: str
    }).then((result: any): void | undefined => {
        if (result.data.code === 700) {
            Toast(result.data.msg);
            //token无效, 没有登录
            router.push({ name: "login" });
            return;
        }



        if (result.data.code === 3000) {
            Toast("加入购物袋成功");
            shopbagCount.value = Number(shopbagCount.value) + goodsNum.value;
        } else {
            Toast("加入购物袋失败");
        }
    })



}

// console.log(goodsNum);

let selectInfo = (index, data) => {
    // console.log(index, data);
    // console.log(productDetail.value);
    productDetail.value[`${data}_Index`] = index

}

let likeRect: () => void = (): void | undefined => {
    // let url: string = isLike.value ? "/notlike" : "/like";
    if (isLike.value) {


        postnotlike({ pid: itempid }).then((result: any): void => {
            Toast(result.data.msg);

            if (result.data.code === 700) {
                //token无效, 没有登录
                return router.push({ name: "login" });
            }

            if (result.data.code === 800) {
                isLike.value = true;
            } else if (result.data.code === 900 && result.data.result === 1) {
                isLike.value = false;
            }

            // console.log(isLike.value)
        })

    } else {
        postlike({ pid: itempid }).then((result: any): void => {
            Toast(result.data.msg);

            if (result.data.code === 700) {
                //token无效, 没有登录
                return router.push({ name: "login" });
            }

            if (result.data.code === 800) {
                isLike.value = true;
            } else if (result.data.code === 900 && result.data.result === 1) {
                isLike.value = false;
            }
        })
    }

};


onMounted(() => {

    getproductDetail(itempid).then((res) => {
        if (res.data.code == 600) {
            productDetail.value = res.data.result[0]
        }

        productDetail.value.desc = productDetail.value.desc.split(/\n/);

        let newArr = [];
        rules.forEach((item) => {
            if (productDetail.value[item] === '') {
                return
            } else {
                newArr.push(item);
                productDetail.value[`${item}`] = productDetail.value[`${item}`].split('/');
                productDetail.value[`${item}_Index`] = 0;
            }

        })
        productDetail.value.select = newArr;

        rules = newArr;

        // console.log(productDetail.value);
    });
    getshopcartCount().then((result: any): void => {

        if (result.data.code === 4000) {
            shopbagCount.value = result.data.result;

        }
    });
    getfindlike({ pid: itempid }).then((result: any): void => {
        if (result.data.code === 1000) {
            if (result.data.result.length > 0) {
                isLike.value = true;
            }
        }
    })
})





</script>
<style lang="less" scoped>
.detail {
    margin-top: 46px;
    width: 100vw;

    .detail-img {
        width: 100vw;
        // width: 100%;
        height: 280px;

        .auto-img {
            width: 100%;
        }
    }

    .detail-info {
        width: 92vw;
        margin: 20px auto;
        padding: 10px;
        position: relative;
        top: -35px;
        border-radius: 10px;
        background-color: #fff;

        .info {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;

            .info-name {
                height: 50%;
                font-size: 14px;
            }

            .info-enname {
                font-size: 12px;
                color: #828282;
                height: 50%;
            }

            .info-price {
                font-weight: 700;
                color: red;
                margin-right: 5px;
            }
        }

        .info-item {
            width: 100%;
            height: 40px;
            display: flex;
            // background-color: antiquewhite;
            align-items: center;
            margin-bottom: 10px;

            .item-name {
                width: 50px;
            }

            .item-select {
                min-width: 70px;
                height: 30px;
                padding: 5px;
                font-size: 14px;
                border-radius: 16px;
                text-align: center;
                color: #3d3d3d;
                background-color: #e8e8e8;
                margin-right: 10px;
                // padding: ;
            }

            .active {
                background-color: #3762f0;
                color: #fff;
            }
        }

        .select-count-box {
            padding: 15px 0;
            margin-top: 20px;
            border-top: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
            display: flex;
            align-items: center;

            .select-text {
                font-size: 14px;
                color: #666;
            }

            .select-count {
                margin-left: auto;
            }
        }



        .detail-desc {
            margin-top: 20px;

            .detail-desc-content {
                color: #666;
                font-size: 12px;
            }

            .detail-desc-title {
                font-size: 14px;
                margin-bottom: 10px;
            }
        }

    }



}
</style>